<template>
  <div class="about">
    <div ref="echat" id="main" style="width:800px;height:900px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      mychart: null
    }
  },
  methods: {
    init () {
      console.log(echarts)
      this.mychart = echarts.init(document.getElementById('main'))
      this.mychart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(185,232,255,0.13)'
            }
          }
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            barWidth: 20,
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0,169,255,1)' },
                { offset: 1, color: 'rgba(32,114,192,0.6)' }
              ])
            }
          }
        ],
        tooltip: {
          axisPointer: {
            type: 'cross'
          }
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
